<template>
	<div id="channel_add" class="dialog animated" :class="open? 'fadeIn':'fadeOut'" v-show="show">
		<div class="panel animated" :class="open? 'zoomIn':''">
			<div class="title">
				新建渠道
				<div class="close" @click="closePage()"></div>
			</div>
			<div class="form">
				<div class="row">
					<label class="label">
						<span>*</span>
						渠道名称
					</label>
					<el-input v-model="param.name" id="name" style="width: 4rem;" maxLength="10" placeholder="" clearable></el-input>
				</div>
				
				<div class="row row_2">
					<label class="label">
						<span>*</span>
						渠道类型
					</label>
					<div class="radio_group">
						<label class="radio" v-for="item in channelMode" @click="param.channelType = item.value">
							<span class="radio_circle" :class="param.channelType==item.value? 'radio_active' : ''"></span>
							<span class="radio_name">{{item.name}}</span>
						</label>
					</div>
				</div>
				
				<div class="row">
					<label class="label">排序</label>
					<el-input v-model="param.oderby" id="oderby" style="width: 2rem;" maxLength="4" placeholder="">
					</el-input>
				</div>
				
				<div class="row">
					<label class="label">备注</label>
					<el-input v-model="param.remark" id="remark" style="width: 4rem;" maxLength="50" placeholder="" clearable></el-input>
				</div>
				
			</div>
			<div class="btn_div">
				<div class="btn_sure" @click="sure()">确 认</div>
				<div class="btn_cancel" @click="closePage()">取 消</div>
			</div>
		</div>
	
	</div>
</template>

<script>
var vm,dict;
var param = {
	name : "",
	channelType : "",
	oderby : "",
	remark : "",
	campusId : "",
	_wait : ""
}
export default {
	data : function() {
		return {
			show : false,
			open : false,
			param : {},
			channelMode : null,
			source : null
		}
	},
	watch : {
		"param.oderby" : function(val) {
			this.param.oderby = tool.parseInt(val);
		}
	},
	methods : {
		init : function(source) {
			vm.show = true;
			vm.open = true;
			vm.param = tool.clone(param);
			vm.param.channelType = vm.channelMode[0].value;
			vm.param.campusId = vm.$store.state.campusId;
			//记录来源
			vm.source = source;
		},
		cancel : function() {
			vm.open = false;
			
			//如果是从线索管理来的,不要动画,直接关闭
//			if(vm.source == "clue_manage") {
//				vm.show = false;
//			} else {
				setTimeout(function() {
					vm.show = false;
				},500);
//			}
		},
		closePage : function() {
			//返回结果状态     close:关闭     ok:新增成功
			vm.$emit('callback', "close");
			vm.cancel();
		},
		sure : function() {
			//验证规则
			var rules = [{
				judge : vm.param.name,
				focus : $("#channel_add #name"),
				tips : tips.blank
			}];
			
			if(!tool.validate(rules)) {
				return;
			}
			api.channelAdd(vm.param).then(function(data) {
				tool.message({ showClose: true, message: "渠道新建成功", type: 'success' });
				vm.$emit('callback', "ok");
			    vm.cancel();
			});
		},
	},
	created : function() {
		vm = this;
		dict = tool.getItem(lsKey.dict,true);
		vm.channelMode = dict["channel_mode"];
	}
}
</script>
<style scoped src="@/style/module/dialog.css"></style>
<style scoped src="@/style/module/radio.css"></style>
<style scoped>
	
	.panel {
		width: 7rem;
	}
	.radio_group {
		width: 5.4rem;
		vertical-align: top;
	}
	.form {
		padding: 0 0.3rem 0 0.2rem;
		font-size: 0.16rem;
		color: #666666;
	}
	.row {
		line-height: 0.5rem;
	}
	.row_2 {
		line-height: 0.36rem;
		padding: 0.1rem 0;
	}
	.label {
		width: 0.9rem;
		display: inline-block;
		text-align: right;
		margin-right: 0.1rem;
	}
	.label>span {
		color: red;
		display: inline-block;
		width: 0.1rem;
		position: relative;
		top: 0.02rem;
	}
</style>